{% extends "base.html" %}
{% load display_tags %}
{% load get_config_setting %}
{% load static %}
{% block add_styles %}
    {{ block.super }}
    ul#select_by_severity a:hover, ul#bulk_edit a:hover {
    cursor: pointer;
    }
{% endblock %}
{% block content %}
    {{ block.super }}
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="clearfix">
                <h3 class="pull-left"> Credential</h3>

                <div id="test-pulldown" class="dropdown pull-right">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                            data-toggle="dropdown" aria-expanded="true" aria-label="Credential and notes options">
                        <span class="fa-solid fa-bars"></span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation">
                            <a href="{% url 'edit_cred' cred.id  %}">
                                <i class="fa-solid fa-pen-to-square"></i> Edit Credential
                            </a>
                        </li>
                        <li role="presentation">
                            <a id="add_notes_link" href="#add_notes">
                                <i class="fa-solid fa-comments"></i> Add Notes
                            </a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <!--<li role="presentation">
                            <a class="text-danger" href="">
                                <i class="fa-solid fa-trash"></i> Delete Configuraiton
                            </a>
                        </li>!-->

                    </ul>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table-striped table table-condensed table-hover centered">
                <tr>
                  <th>Name</th>
                  <th>Alternate URL</th>
                  <th>Username</th>
                  <th>Password</th>
                  <th>Role</th>
                  <th>Environment</th>
                  <th>Valid Login</th>
                </tr>
                <tr>
                  <td><a href="{{ cred.url }}" target="_blank">{{ cred.name  }}</a></td>
                  <td>
                    {% if cred.url %}
                      <a href="{{ cred.url }}">Alternate URL</a>
                    {% endif %}
                  </td>
                  <td>{{ cred.username }}</td>
                  <td>{{ cred.password|get_pwd }}</td>
                  <td>{{ cred.role }}</td>
                  <td>{{ cred.environment }}</td>
                  <td>{{ cred.is_valid }}</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>Login Details</h4>
                </div>
                <div class="table-responsive">
                    <table class="table-striped table table-condensed table-hover centered">
                        <tr>
                          <th>Authentication Type</th>
                          <th>HTTP Authentication</th>
                          <th>Login RegEx</th>
                          <th>Logout RegEx</th>
                        </tr>
                        <tr>
                            <td>{{ cred.authentication }}</td>
                            <td>{{ cred.http_authentication }}</td>
                            <td>{{ cred.login_regex }}</td>
                            <td>{{ cred.logout_regex }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4>Associated Products</h4>
        </div>
        <div class="table-responsive">
            {% if cred_products %}
            <table class="table-striped table table-condensed table-hover centered">
                <tr>
                  <th>Product Name</th>
                  <th>Alernate URL</th>
                  <th>Authentication Provider</th>
                </tr>
                {% for cred in cred_products %}
                  <tr>
                    <td>
                      <a href="{% url 'view_product' cred.product.id %}">{{ cred.product }}</a>
                    </td>
                    <td>
                      {% if cred.url %}
                        <a href="{{ cred.url }}">Alternate URL</a>
                      {% else %}
                        None Configured
                      {% endif %}
                    </td>
                    <td>{{ cred.is_authn_provider }}</td>
                  </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
                <div class="panel-body">
                    <p>No products associated with this credential.</p>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="panel panel-default table-responsive">
        <div class="panel-heading">
            <h3>Notes</h3>
        </div>
        <div class="panel-body">
            {% if notes %}
                <table id="notes" class="table-striped table table-condensed table-hover">
                    <thead>
                    <tr>
                        <th>User</th>
                        <th>Date</th>
                        <th>Note</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for note in notes %}
                        <tr>
                            <td>
                                {{ note.author.username }}
                            </td>
                            <td>
                                {{ note.date }}
                            </td>
                            <td>
                                {{ note }}
                                {% if person == note.author.username %}
                                    <div class="pull-right">
                                        <form method="post" action="{% url 'delete_note' note.id 'cred' cred.id %}">
                                            {% csrf_token %}
                                            <input type="hidden" aria-label="id" name="id" value="{{note.id}}"
                                                   id="id_id" />
                                            <button type="submit" aria-label="Delete Note" class="btn-delete">
                                              <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="text-center">No notes found.</p>
            {% endif %}
            <hr/>
            <form class="form-horizontal" id="add_notes" action="{% url 'view_cred_details' cred.id %}"
                  method="post">{% csrf_token %}
                {% include "dojo/form_fields.html" with form=form %}
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input class="btn btn-secondary" type="submit" value="Add Note"/>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block postscript %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "jquery-highlight/jquery.highlight.js" %}"></script>
    <script type="text/javascript">
        $(function () {
            $('form#bulk_change_form').on('submit', function(e){
                $('input[type=checkbox].select_one:checked').each(function(){
                    var hidden_input = $('<input type="hidden" value="' + this.id + '" name="finding_to_update">')
                    $('form#bulk_change_form').append(hidden_input);
                });
            });

            $('input#select_all').on('click', function (e) {
                if ($(this).is(":checked")) {
                    $('input.select_one').prop('checked', true);
                    $('div#bulk_edit_menu').removeClass('hidden');
                }
                else {
                    $('input.select_one').prop('checked', false);
                    $('div#bulk_edit_menu').addClass('hidden');
                }
            });

            $('ul#select_by_severity a').on('click', function (e) {
                $('input.select_one').prop('checked', false);
                if ($(this).attr('id') == 'All') {
                    $('input.select_one').prop('checked', true);
                    $('input#select_all').prop('indeterminate', false);
                    $('input#select_all').prop('checked', true);
                }
                else {
                    $('input.' + this.id).prop('checked', true);
                    $('input#select_all').prop('indeterminate', true);
                }

                if ($(this).attr('id') == 'None') {
                    $('div#bulk_edit_menu').addClass('hidden');
                }
                else {
                    $('div#bulk_edit_menu').removeClass('hidden');
                }
            });


            $('a.delete-finding').on('click', function (e) {
                return confirm('Are you sure you want to delete this finding?');
            });

            $('a#add_notes_link').on('click', function (e) {
                $("html, body").animate({scrollTop: $("#id_entry").offset().top}, 600);
                $("#id_entry").focus();
                $("#test-pulldown").dropdown('toggle')
                return false;
            });

            if (document.referrer.indexOf('simple_search') > 0) {
                var terms = '';
                if ($.cookie('highlight')) {
                    terms = $.cookie('highlight').split(' ');

                    for (var i = 0; i < terms.length; i++) {
                        $('body').highlight(terms[i]);
                    }
                }

                $('input#simple_search').val(terms);
            }
            ;


            $('form#quick-add-form').on("submit", function () {
                $('form#quick-add-form').removeClass("has-error");
                $('button#the_button').attr('disabled', true).removeClass("btn-success btn-danger").addClass('btn-warning');
                $('i#fa-icon').removeClass("fa-plus").addClass("fa-spinner fa-pulse");

                $.ajax({
                    type: "POST",
                    data: JSON.stringify($(this).serializeObject()),
                    url: '{{ ajax_url }}',
                    contentType: 'application/json',
                    // The ``X-CSRFToken`` evidently can't be set in the
                    // ``headers`` option, so force it here.
                    // This method requires jQuery 1.5+.
                    beforeSend: function (jqXHR, settings) {
                        // Pull the token out of the DOM.
                        jqXHR.setRequestHeader('X-CSRFToken', $('input[name=csrfmiddlewaretoken]').val());
                    },
                    success: function (data, textStatus, jqXHR) {
                        // Your processing of the data here. <a href='" + jqXHR.getResponseHeader('Location') + "'>" +  + "</a>
                        //
                        $('table#stub_findings').removeClass('hidden');
                        var fid = jqXHR.getResponseHeader('Location').split('/');
                        fid = fid[fid.length - 2];
                        var row = $("<tr id='added-" + fid + "' class='success'></tr>");
                        var link = $('<a></a>');

                        link.attr('href', "/stub_finding/" + fid + "/promote");
                        link.text($("input#quick_add_finding").val());
                        var title = $("<td></td>").append(link);
                        var severity = $("<td> </td>");
                        var reporter = $("<td>{{ request.user.username }}</td>");
                        var date = $("<td>None</td>");
                        var actions = $('<td><div class="btn-group"><a class="btn btn-sm btn-warning" href="/stub_finding/[id]/promote">Promote To Finding</a> <a class="btn btn-sm btn-danger" href="/stub_finding/[id]/delete">Delete</a></div></td>'.replace(/\[id\]/g, fid));

                        row.append(title, severity, reporter, date, actions).appendTo("#stub_findings tbody");
                        $("input#quick_add_finding").val("")
                        $('button#the_button').removeClass("btn-warning btn-danger").addClass('btn-success');

                        $("input#quick_add_finding").focus()

                        setTimeout(function () {
                            $("tr#added-" + fid + " td").animate({
                                backgroundColor: "#fff",
                            })
                        }, 2000)
                    },
                    error: function () {
                        $('form#quick-add-form').addClass("has-error");
                        $('button#the_button').removeClass("btn-warning").addClass('btn-danger');
                    },
                    complete: function () {
                        $('i#fa-icon').addClass("fa-plus").removeClass("fa-spinner fa-pulse");
                        $('button#the_button').attr('disabled', false);

                    }
                });
                return false;
            });

        });

    </script>
{% endblock %}
